<template>
  <div class="table-list-wrapper">
    <el-table :data="list" style="width: 100%" border :height="height">
      <el-table-column prop="start_time" label="开始时间" width />
      <el-table-column prop="end_time" label="结束时间" width />
      <el-table-column prop="name" label="课程名称" width="300" />
      <el-table-column label="是否发布" width>
        <template slot-scope="scope">
          <div>
            <el-switch v-model="scope.row.is_publish" @change="publishStatusChange(scope.row)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" class="edit">编辑</el-button>
          <el-button type="primary" class="del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <order-detail ref="orderDetail" />
  </div>
</template>
<script>
import OrderDetail from '@/views/order/order-detail'
import { upDataActivetyStatus } from '@/api/request/org-group'
const ERR_OK = 200
export default {
  components: {
    OrderDetail
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      height: 0,
      value: '',
      dialogVisible: false,
      id: '',
      dialogImageUrl: '',
      imgDialogVisiable: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resitHeight()
    })
  },
  methods: {
    publishStatusChange(val) {
      console.log(val)
      this._upDataActivetyStatus({ id: val.id, is_publish: val.is_publish ? 1 : 0 })
        .then(() => {
          this.$emit('changeSuccess')
        })
        .catch(err => {
          console.log(err)
        })
    },
    showSecTitle() {},
    detail() {
      this.$refs.orderDetail.show()
    },
    handleImgClick(img) {
      this.dialogImageUrl = img
      this.imgDialogVisiable = true
    },
    handleAgree(scope) {
      this._dealWithShopApply({ status: 'pass', id: scope.row.id })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleRefuse(scope) {
      this.dialogVisible = true
      this.id = scope.row.id
    },
    handleCloseDialog(params) {
      this.dialogVisible = false
      this._dealWithShopApply({
        status: 'return',
        id: this.id,
        remark: params.remark
      })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    resitHeight() {
      this.height = document.body.clientHeight - 300
      window.onresize = () => {
        this.height = document.body.clientHeight - 300
      }
    },
    _upDataActivetyStatus({ id, is_publish }) {
      return upDataActivetyStatus({ id, is_publish })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-button.scss";
.el-table /deep/ .cell {
  .el-avatar {
    margin-right: 15px;
  }
}
.table-list-wrapper {
  margin-top: 35px;
}
.d-flex {
  display: flex;
  align-items: center;
}
.edit {
  background: #00adb3;
  border-color: #00adb3;
  color: #fff;
}
.del {
  background: #dddddd;
  border-color: #dddddd;
  color: #000;
}
</style>
